<template>
  <div class="locate-panel-container">
    <el-container>
      <el-header height="36px">
        <div class="full-box p-a-mini flex-between f-16 b-b jsc-f-c">
          <span>定位
            <el-popover
              placement="top-start"
              title="提示"
              width="300"
              trigger="hover"
              :content="`格式如下：106°16′36.29″,38°59′11.71″或106.123447,38.591213`"
            >
              <BKSvgIcon
                slot="reference"
                icon-class="svg-sys-question"
                class="f-20"
                style="transform: translateY(1px);"
              />
            </el-popover>
          </span>
          <i
            class="el-icon-close c-pointer"
            @click="closePanel"
          />
        </div>
      </el-header>
      <el-main>
        <div class="full-box flex-ai-c p-v-mini">
          <div class="flex-1 overflow-hidden flex-ai-c m-l-mini m-r-mini">
            <span class="m-r-mini ws-n f-14 jsc-f-c">坐标</span>
            <BKInput
              v-model="coordinate"
              size="small"
              placeholder="请输入坐标"
              @keyup.enter.native="coordinateOperation()"
              ref="input"
            >
              <el-tooltip
                slot="suffix"
                content="转换坐标格式"
                placement="top"
                effect="light"
              >
                <BKSvgIcon
                  icon-class="svg-sys-switch"
                  class="c-pointer f-20"
                  style="transform: translateY(7px);"
                  @click="coordinateOperation('transform')"
                />
              </el-tooltip>
            </BKInput>
          </div>
          <el-button
            class="lp-text-button"
            size="small"
            style="width: 54px;margin-right: 12px;"
            @click="copy"
          >
            复制
          </el-button>
        </div>
      </el-main>
      <el-footer
        height="46px"
        style="padding-bottom: 8px;"
        class="flex-ai-c jc-c"
      >
        <el-button
          class="lp-text-button"
          size="mini"
          type="primary"
          @click="coordinateOperation()"
        >
          定位
        </el-button>
        <el-button
          class="lp-text-button"
          size="nimi"
          type="primary"
          @click="startPick"
        >
          拾取坐标
        </el-button>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import { mapSearchByLocation } from '@/api/essential/map.js'

export default {
  name: 'LocatePanel',
  props: {
    isGlobal: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      // 经度
      longitude: '',
      // 纬度
      latitude: '',
      // 坐标
      coordinate: ''
    }
  },
  methods: {
    focus () {
      this.$refs.input.focus()
    },
    reset () {
      this.longitude = ''
      this.latitude = ''
      this.coordinate = ''
      document.querySelector('body').style.cursor = 'default'
      this.$root.$off('mapClick', this.handleMapClick)
    },
    closePanel () {
      this.reset()
      this.$emit('close')
    },
    async handleSearch (longitude, latitude) {
      const data = await mapSearchByLocation({ location: longitude + ',' + latitude })
      const location = [parseFloat(longitude), parseFloat(latitude)]
      if (this.isGlobal) {
        await this.$mapManager.invoke('setCenterAndZoom', [longitude, latitude], 17, false)
        if (!data || Array.isArray(data.formatted_address)) {
          this.$mapManager.getMapComponent().map1.tipsPopup.hide()
          return this.$message.warning('指定坐标未找到地点信息！')
        } else {
          this.$mapManager.getMapComponent().map1.tipsPopup.show(location, `<div>${data.formatted_address}</div>`)
        }
      } else {
        this.$emit('confirmLocate', location, { name: data.formatted_address })
      }
    },
    coordinateOperation (type = 'search') {
      if (this.coordinate) {
        if (/[,，]/g.test(this.coordinate)) {
          let [longitude, latitude] = this.coordinate.split(/[,，]/g)
          if (longitude && latitude) {
            if (this.$helper.reg.longitude.test(longitude) && this.$helper.reg.latitude.test(latitude)) {
              // 度分秒格式
              const lon = this.$helper.translateCoordinate(longitude.split(this.$helper.reg.coordianteUnits)).toFixed(6)
              const lat = this.$helper.translateCoordinate(latitude.split(this.$helper.reg.coordianteUnits)).toFixed(6)
              if (type === 'search') {
                this.handleSearch(lon, lat)
              } else {
                this.coordinate = `${lon},${lat}`
              }
            } else {
              // 小数格式
              longitude = parseFloat(longitude)
              latitude = parseFloat(latitude)
              if ((longitude >= 0 && longitude <= 180) && (latitude >= 0 && latitude <= 90)) {
                if (type === 'search') {
                  this.handleSearch(longitude, latitude)
                } else {
                  const lon = this.$helper.translateCoordinate(longitude, true)
                  const lat = this.$helper.translateCoordinate(latitude, true)
                  this.coordinate = `${lon[0]}°${lon[1]}′${lon[2]}″,${lat[0]}°${lat[1]}′${lat[2]}″`
                }
              } else {
                this.$message.warning('请输入正确格式的经纬度')
              }
            }
          } else {
            // 缺乏经度或者纬度
            this.$message.warning('请输入完整的经度和纬度')
          }
        } else {
          this.$message.warning('请输入正确格式的经纬度')
        }
      } else {
        this.$message.warning('请输入经纬度')
      }
    },
    startPick () {
      document.querySelector('body').style.cursor = 'crosshair'
      this.$root.$off('mapClick', this.handleMapClick)
      this.$root.$on('mapClick', this.handleMapClick)
    },
    handleMapClick (e) {
      this.coordinate = e.map(item => item.toFixed(6)).join(',')
      this.$root.$off('mapClick', this.handleMapClick)
      document.querySelector('body').style.cursor = 'default'
      this.$message.success('拾取成功！')
    },
    copy () {
      const element = this.$refs.input.$refs.input.$refs.input
      element.select()
      element.setSelectionRange(0, element.value.length)
      document.execCommand('copy')
      this.$message.success('已复制到剪贴板')
    }
  }
}
</script>

<style lang="scss" scoped>
.locate-panel-container {
  position: absolute;
  z-index: 1;
  width: 345px;
  background: #ffffffe8;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .el-header {
    border-radius: 4px 4px 0 0;
    // background: linear-gradient(0deg, rgba($color: #f3f6fa, $alpha: 0.5) 0%, rgba($color: #fbfbfc, $alpha: 0.5) 100%);
  }

  .el-footer {
    // background: #fff;
    border-radius: 0 0 4px 4px;
  }

  .lp-text-button {
    // background-color: rgba($color: #082281, $alpha: 0.5);
    // border: 1px solid #1578ff;
    border-radius: 4px;
    font-size: 14px;
    padding: 8px 15px;
    // color: #bccef5;
    white-space: nowrap;

    // &:hover {
    //   background: linear-gradient(0deg, #160872 0%, #2156c0 100%) !important;
    // }
  }

  // ::v-deep .el-input__inner {
  //   background: #161d45;
  //   border-color: #161d45;
  //   color: #fff;

  //   &::placeholder {
  //     transform: translateY(1px);
  //   }
  // }
}
</style>
